<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=0.7">
	<title>工单列表</title>
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css')}}?t={{time()}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/list.css')}}?v=1">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/st.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
</head>
<body style="padding:30px;">
<div id="main">
	<el-card class="search-tool-box">
		<el-collapse v-model="open_tool_box">
			<el-collapse-item name="true">
				<template slot="title">
					<h4 style="text-indent:2rem;">查询工具栏</h4>
				</template>
				<el-form inline :model="seaForm" label-width="100px" class="seaForm">
					<el-form-item label="录入日期">
						<el-date-picker v-model="seaForm.date" type="date"
							placeholder="录入日期" value-format="yyyy-MM-dd" size="small">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="登记人">
						<el-select v-model="seaForm.admin_name" size="small" filterable clearable>
							@foreach($Admins as $a)
							<el-option label="{{$a->en_name}}——{{$a->ch_name}}" value="{{$a->username}}"></el-option>
							@endforeach
						</el-select>
					</el-form-item>
					<el-form-item label="咨询方式">
						<el-select v-model="seaForm.ask_way" size="small" filterable clearable>
							<el-option label="电话咨询" value="电话咨询"></el-option>
							<el-option label="面咨" value="面咨"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="咨询类型">
						<el-select v-model="seaForm.ask_type" size="small" filterable clearable>
							<el-option label="电话咨询" value="电话咨询"></el-option>
							<el-option label="预约试听" value="预约试听"></el-option>
							<el-option label="试听记录" value="试听记录"></el-option>
							<el-option label="报名" value="报名"></el-option>
							<el-option label="二报通知" value="二报通知"></el-option>
							<el-option label="二报记录" value="二报记录"></el-option>
							<el-option label="开班学员分配" value="开班学员分配"></el-option>
							<el-option label="新班家长会通知" value="新班家长会通知"></el-option>
							<el-option label="新班家长会记录" value="新班家长会记录"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="二级分类">
						<el-select v-model="seaForm.ask_type_s" size="small" filterable clearable>
							<el-option label="电话咨询" value="电话咨询"></el-option>
							<el-option label="面咨" value="面咨"></el-option>
							<el-option label="其他" value="其他"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="学生姓名">
						<el-input v-model="seaForm.st_name" placeholder="学生姓名" size="small"></el-input>
					</el-form-item>
					<el-form-item label="联系方式">
						<el-input v-model="seaForm.phone" placeholder="联系方式" size="small"></el-input>
					</el-form-item>
					<el-form-item label="家长姓名">
						<el-input v-model="seaForm.parent_name" placeholder="家长姓名" size="small"></el-input>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="doSearch"
							icon="el-icon-search" size="small" plain>
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</el-card><hr>
	<el-card class="table-box">
		<div slot="header" class="el-card-header" align="right">
			<div class="btn-group">
				<el-button-group>
					<button type="button" class="el-button el-button--primary el-button--small is-plain " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="el-icon-download"></i>导出 <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li @click="dataExport('selected')">导出选中</li>
						<li @click="dataExport('all')">导出全部</li>
					</ul>
					<el-button plain size="small" icon="el-icon-refresh"@click="getData" type="info">刷新</el-button>
				</el-button-group>
			</div>
		</div>
		<div class="el-card-body">
			<el-table :data="table.data" border @sort-change="reSort"
				v-loading.fullscreen.lock="table.loading" @selection-change="handleSelectionChange">
				<el-table-column align="center" prop="id" type="selection" width="35">
				</el-table-column>
				<el-table-column align="center" prop="id" label="序号" width="75" sortable>
				</el-table-column>
			  	<el-table-column align="center" prop="st_name" label="学生姓名">
			  	</el-table-column>
				<el-table-column align="center" prop="p_name" label="家长姓名">
				</el-table-column>
				<el-table-column align="center" prop="phone" label="联系方式">
				</el-table-column>
				<el-table-column align="center" prop="date" label="录入时间" sortable>
				</el-table-column>
				<el-table-column align="center" prop="admin_name" label="登记人">
				</el-table-column>
				<el-table-column align="center" prop="ask_way" label="咨询方式">
				</el-table-column>
				<el-table-column align="center" prop="ask_type" label="咨询类型">
				</el-table-column>
				<el-table-column align="center" prop="ask_type_s" label="二级分类">
				</el-table-column>
				<el-table-column align="center" width="60" prop="level" label="定级">
				</el-table-column>
				<el-table-column align="center" prop="level_changed" label="定级变更">
				</el-table-column>
				<el-table-column align="center" type="expand" label="...">
					<template slot-scope="props">
						<p style="margin:0;padding:0;">备注：@{{props.row.remark}}</p>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				align="right"
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="seaForm.page.pageNumber"
				:page-sizes="[10, 25, 50]"
				:page-size="seaForm.page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="seaForm.page.total">
			</el-pagination>
		</div>
	</el-card>
</div>
</body>
<script type="text/javascript">
let main = new Vue({
	el:"#main",
	data:{
		open_tool_box:"false",
		seaForm:{
			_token:"{{csrf_token()}}",
			st_id:"{{$st_id}}",
			date:"",
			admin_name:"",
			st_name:"",
			phone:"",
			parent_name:"",
			ask_way:"",
			ask_type:"",
			ask_type_s:"",
			page:{
				pageNumber:1,
				pageSize:10,
				total:0
			},
			sort:{
				sortBy:"id",
				orderBy:"desc",
			}
		},
		table:{
			loading:false,
			data:[]
		}
	},
	mounted:function() {
		this.init();
	},
	methods:{
		init() {
			this.getData();
		},
		getData() {
			this.table.loading = true;
			let url = "{{URL::asset('admin/consultation/workorder/get_list')}}";
			let params = this.seaForm;
			$.post(url,params,function(res) {
				main.table.loading = false;
				if(res.code == 1){
					main.$message.success(res.msg);
					main.table.data = res.data.rows;
					main.seaForm.page.total = res.data.total;
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			})
		},
		doSearch() {
			this.open_tool_box = "false";
			this.seaForm.page.pageNumber = 1;
			this.getData();
		},
		pageSizeChange(val) {
			this.seaForm.page.pageSize = val;
			this.seaForm.page.pageNumber = 1;
			this.getData();
		},
		curPageChange(val) {
			this.seaForm.page.pageNumber = val;
			this.getData();
		},
		reSort(col) {
			if(col.prop){
				this.seaForm.sort.sortBy = col.prop;
				if(col.order == "ascending"){
					this.seaForm.sort.orderBy = "asc";
				}else{
					this.seaForm.sort.orderBy = "desc";
				}
			}else{
				this.seaForm.sort.sortBy = "id";
				this.seaForm.sort.orderBy = "desc";
			}
			this.doSearch();
		},
		handleSelectionChange(val) {
			let length = val.length;
			this.selected_ids = [];
			for(let i=0;i<length;i++){
				this.selected_ids.push(val[i].list_id)
			}
		},
		dataExport() {
			
		}
	}
})
</script>
</html>
